
<template>
    <div class="com-container" style="fontSize:12px">
        <!-- :style="popheight+'px'" :style="RiskWidth" -->
        <div class="com-chart com-charts" ref="echarts" style="z-index:555;position: relative;"></div>
    </div>
</template>

<script>



export default {
    props: ["commonData", "xData"],
    data() {
        return {
            chartInstance: null,
            allData: null, // 服务器返回的数据
            xDatas: null,

        };
    },
    watch: {

        commonData: {
            handler(newVal) {
                if (newVal) {
                    this.allData = newVal
                    this.getData();
                }
            },
            immediate: true
        },
        xData: function (data) {
            this.xDatas = data
            this.getData();
        },



    },

    mounted() {
        setTimeout(() => {
            this.initChart();

            window.addEventListener("resize", this.screenAdapter);
            // 在页面加载完成的时候, 主动进行屏幕的适配
            this.screenAdapter();
        }, 500);
    },

    destroyed() {
        // 在组件销毁的时候, 需要将监听器取消掉
        window.removeEventListener("resize", this.screenAdapter);
    },
    methods: {
        initChart() {

            this.chartInstance = this.$echarts.init(this.$refs.echarts);
            var option = {
                title: {
                    left: 'center'
                },
                grid: {
                    left: "5%",
                    right: "5%",
                    bottom: "12%",
                    top: "13%",
                    containLabel: true,
                },
                // legend: {
                //     left: "center",
                //     top: "5%",
                //     icon: 'roundRect',
                //     textStyle: {
                //         color: "#90979c",
                //     },
                // },


                calculable: true,
                xAxis: [{
                    type: "category",

                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#9D9EA0',

                        }
                    },
                    splitLine: { //坐标轴在 grid 区域中的分隔线。
                        show: false,
                        lineStyle: {
                            color: '#DEDEDE',

                        }
                    },
                    // data: xData,
                }],

                yAxis: [{
                    type: "value",
                    name: 'kg',

                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#9D9EA0',


                        }
                    },
                    splitLine: { //坐标轴在 grid 区域中的分隔线。
                        show: true,
                        lineStyle: {
                            color: '#DEDEDE',
                            type: 'dotted'

                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: "#9D9EA0"
                        }
                    },

                }],


            }
            this.chartInstance.setOption(option);
        },
        getData() {

            var data = this.allData

            var dateTimeStr = []//x坐标
            data.map(item => {
                dateTimeStr.push(parseInt(item.dateTimeStr.slice(-2)) + "点")
            })


            var sumWeight = []//重量

            var xData = []
            if (data) {
                data.map(i => {
                    xData.push(i.F_DischargeDates)
                    sumWeight.push(i.sumWeight//重量
                    )


                })
            }

            var that = this

            setTimeout(() => {

                if (data) {
                    that.updateChart(dateTimeStr, data, sumWeight, this.xDatas);


                }
            }, 2000)
        },

        updateChart(xData, data, data1, xDatas) {

            var seriesTotal = [
                {
                    name: "总产量",
                    type: "line",
                    // itemStyle: {
                    //     color: "#6DC5E0",
                    // },
                    // type: 'bar',
                    barMaxWidth: 20,
                    zlevel: 10,
                    smooth: true, //平滑曲线显示
                    itemStyle: {
                        normal: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: '#4F93FE'
                                }, {
                                    offset: 1,
                                    color: '#A7D6FF'
                                }]
                            },
                            barBorderRadius: [30, 30, 0, 0],

                        }
                    },

                    data: data1,

                }

            ]

            var dataOption = {

                tooltip: {
                    show: true,
                    formatter: function (params) {
                        var str = "";
                        str = '时间 : ' + params.name + "<br/>" +
                            xDatas[0] + " : " + data[params.dataIndex].sumWeight + 'kg' + "<br/>" +
                            xDatas[1] + " : " + data[params.dataIndex].OreWeight + 'kg' + "<br/>" +
                            xDatas[2] + " : " + data[params.dataIndex].no1GravelWeight + 'kg' + "<br/>" +
                            xDatas[3] + " : " + data[params.dataIndex].no2GravelWeight + 'kg' + "<br/>" +
                            xDatas[4] + " : " + data[params.dataIndex].no3GravelWeight + 'kg' + "<br/>" +
                            xDatas[5] + " : " + data[params.dataIndex].no4GravelWeight + 'kg' + "<br/>" +
                            xDatas[6] + " : " + data[params.dataIndex].no5GravelWeight + 'kg' + "<br/>" +
                            xDatas[7] + " : " + data[params.dataIndex].no6GravelWeight + 'kg' + "<br/>" +
                            xDatas[8] + " : " + data[params.dataIndex].asphaltWeight + 'kg' + "<br/>"
                        return str;
                    }
                },

                toolbox: {
                    show: true,
                    feature: {
                        dataView: {
                            readOnly: true,
                            lang: [' ', '关闭'],
                            optionToContent: function (opt) {

                                let axisData = opt.xAxis[0].data; //坐标数据
                                // let series = opt.series; //折线图数据
                                let tdHeads = '<td  style="padding: 2px 10px;background-color: #eeeeee;font-weight: 700;color: #333333"">时间</td>'; //表头
                                let tdBodys = ''; //数据
                                // console.log(series)
                                xDatas.forEach(function (item) {
                                    //组装表头
                                    tdHeads += `<td style="padding: 2px 10px;background-color: #eeeeee;font-weight: 700;color: #333333">${item}</td>`;
                                });
                                let table = `<table   border="1" style=" width: 96%;margin-left:20px;border-collapse:collapse;font-size:14px;text-align:center" class="dataViewTable"><tbody><tr>${tdHeads} </tr>`;

                                for (let i = 0; i < axisData.length; i++) {

                                    tdBodys += `<td>${data[i].sumWeight}</td><td>${data[i].OreWeight}</td><td>${data[i].no1GravelWeight}</td>
                                    <td>${data[i].no2GravelWeight}</td><td>${data[i].no3GravelWeight}</td><td>${data[i].no4GravelWeight}</td>
                                    <td>${data[i].no5GravelWeight}</td><td>${data[i].no6GravelWeight}</td><td>${data[i].asphaltWeight}</td>`;

                                    //组装表数据
                                    // tdBodys += `<td>${series[j].data[i]}kg</td>`;
                                    // }
                                    table += `<tr style="line-height: 30px;height: 30px;"><td style="padding: 2px 10px;text-align: center">${axisData[i]}oo </td>${tdBodys}</tr>`;
                                    tdBodys = '';
                                }

                                // for()data
                                table += '</tbody></table>';
                                return table;
                            },
                        },
                        magicType: {
                            type: ["line", "bar"],
                            option: {
                                type: "line",
                            },
                        },
                        restore: {},
                        saveAsImage: {},
                    },
                },
                xAxis: [{

                    data: xData,
                }],
                series: seriesTotal
            };

            this.chartInstance.setOption(dataOption);
        },
        screenAdapter() {
            // const titleFontSize = (this.$refs.echarts.offsetWidth / 100);
            // console.log(titleFontSize);

            //   和分辨率大小相关的配置项
            const adapterOption = {
                title: {



                    // textStyle: {
                    //     fontSize: titleFontSize,


                    // },

                },


            };
            this.chartInstance.setOption(adapterOption);
            // 手动的调用图表对象的resize 才能产生效果
            this.chartInstance.resize();

        },
    },
};
</script>

<style lang="less" scope>
.com-chart::after {
    //     display: block;
    //     content: "123";
    //     position: absolute;
    //     left: 0;
    //     top: 0;
    //   width: 50px;
    //   height: 40px;
    //   border: 1px solid red;
    //   z-index: 9999;
}

.com-charts ::after {
    //   display: block;
    //   content: "123";
    //   position: absolute;
    //   transform: translate(-50%,-50%);
    //   left: 50%;
    //   top: 60%;
    // width: 47%;
    // height: 90%;

    // z-index: 9999;
}

/* echarts表格样式 */
.echartsTable {
    width: 100%;
    text-align: center;
    min-height: 25px;
    line-height: 25px;
    border-collapse: collapse;
    padding: 2px;
    font-size: 12px;
}



.echartsTable,
.echartsTable tr th,
.echartsTable tr td {
    // border: 1px solid gray;
    // flex: 1;
    border-bottom: 1px solid #DDDDDD;
    text-align: left;
    padding: 2px 5px;
}

.echartsTable .typeshi {
    width: 50%;
}

.echartsTable tr:nth-child(even) {
    border-bottom: 1px solid gray;
    background: #F9F9F9;
}
</style>

